<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的余额</title>
<!-- Bootstrap -->
<link href="../../../../statics/shuafen/css/bootstrap.min.css"
	rel="stylesheet">
<link href="../../../../statics/shuafen/css/profile_style.css" rel="stylesheet">
<link href="../../../../statics/shuafen/css/response.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../../../../statics/shuafen/js/jquery-easyui/themes/metro-red/easyui.css" id="skin">
<link rel="stylesheet" type="text/css" href="../../../../statics/shuafen/js/jquery-easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../../statics/shuafen/js/jquery-easyui/demo/demo.css">
<link rel="stylesheet" type="text/css" href="../../../../statics/shuafen/css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://www.udppvr.cn:80/static/js/jquery.min.js"></script>
<script type="text/javascript" src="../../../../statics/shuafen/js/lib/jquery.cookie.js"></script>
<script type="text/javascript" src="../../../../statics/shuafen/js/lib/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../../../statics/shuafen/js/lib/asyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../../../../statics/shuafen/js/lib/common.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../../../../statics/shuafen/js/lib/bootstrap.min.js"></script>
<script src="../../../../statics/shuafen/js/lib/style.js"></script>
<script type="text/javascript" src="../../../../statics/shuafen/js/lib/jquery.qrcode.min.js"></script>
<script type="text/javascript">
	$(function (){
		//从后台获取充值策略
		$.ajax({
			url : "index.php?m=shuafen&c=web&a=recharge&submit=1",
			method : 'get',
			success : function (rs){
				for (var i = 0 ;i  < rs.length; i ++) {
					var row = rs[i];
					var money = parseFloat(row.money);
					var tr = '<tr><th style="color:#333;">'+money.toFixed(2)+'元币'
					+'</th><td><button type="button" onclick="startPay('+row.pay_money+');" class="btn btn-primary">￥'+parseFloat(row.pay_money).toFixed(2)
					+'</button></td></tr>';
					$("#dataGridTab").append(tr);
				}
			},
			dataType : 'json'
		});
	});
	//改变支付方式
	function changePayWay(val) {
		if (val == 1) {			
			$("#payWayTip").text("支付宝支付");
		}else {
			$("#payWayTip").text("微信支付");
		}
	}
//开始支付
function startPay(rechargeMoney,saveMoney){
	$.messager.confirm('充值提醒','充值后不可提现，仅可用于在本公司网站内部消费，确定继续吗',
		function(r){
			if(r) {
			if ($("#payWay").val() == "1") { //支付宝支付
				$("#rechargeMoney").val(rechargeMoney);
				$("#saveMoney").val(saveMoney);
				$("#alipayment").submit();	
			}else if($("#payWay").val() == "2"){//微信支付
				//通过 ajax 将数据提交到后台，并且生成订单信息
				$.ajax({
					url : '',
					data : {
						rechargeMoney : rechargeMoney,
						saveMoney : saveMoney
					},
					success : function (rs) {
						if(!rs.iserror) {
							$("#modelText").empty();
							var str = toUtf8(rs.message);
							$("#modelText").qrcode({
								render: "canvas",
								width: 200,
								height:200,
								typeNumber : -1,
								correctLevel : 0,
								background : "#ffffff",
								foreground : '#000000',
								text: str
							});
							$('#myModal').modal();
						}
					},
					dataType : 'json'
				});
			} 
		}
	});
}
	function toUtf8(str) {   
	    var out, i, len, c;   
	    out = "";   
	    len = str.length;   
	    for(i = 0; i < len; i++) {   
	    	c = str.charCodeAt(i);   
	    	if ((c >= 0x0001) && (c <= 0x007F)) {   
	        	out += str.charAt(i);   
	    	} else if (c > 0x07FF) {   
	        	out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));   
	        	out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));   
	        	out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));   
	    	} else {   
	        	out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));   
	        	out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));   
	    	}   
	    }   
	    return out;   
	}  
</script>
</head>
<body>
	<h1 class="logo">充值</h1>
	<div class="proinfo pro-user">
     <table id="dataGridTab">
     <tr>
     	<th colspan="2" style="color:#333;">账户余额：</th>
     </tr>
     <!--
	 <tr>
     	<th colspan="2" style="color:#333;">请选择支付方式</th>
     </tr>
     <tr>
     	<th colspan="2">
     		 <select id="payWay" class="form-control" onchange='javascript:changePayWay(this.value)'>
     		 	<option value="1">支付宝支付</option>
     		 	<option value="2">微信支付</option>
     		 </select>
     	</th>
     </tr>
	 -->
     <tr>
		<input type="hidden" id="payWay" value="1" />
     	<th colspan="2" style="color:#333;">支付方式：<span id="payWayTip">支付宝支付</span></th>
     </tr>
     </table>
    </div><!--proinfo/-->
	<div class="heights">&nbsp;</div>
	{template 'shuafen', 'footer'}
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">请打开微信，扫码完成支付，支付完成后，返回用户中心即可！</h4>
				</div>
				<div class="modal-body" style="text-align:center;" id="modelText">
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
<!-- 支付宝支付表单 -->
<form name="alipayment" id="alipayment" action="index.php?m=shuafen&c=payment&a=pay" method="post">
<!--<form name="alipayment" id="alipayment" action="#" method="post">-->
    <div id="body" style="clear:left">
		<input name="rechargeMoney" type="hidden" id="rechargeMoney" value=""/>
		<input name="saveMoney" id="saveMoney" type="hidden" value=""/>
    </div>
</form>
</body>
</html>